<template>
  <view class="tab-list">
    <view class="item" v-for="(item, index) in list" :key="index" @click="switchTab(item)">
      <!-- VIP中间页面 -->
      <v-image :duration="0" :is-fade="false" :is-lazy="false" width="72rpx" height="72rpx" :url="getUrl(item)" v-if="1 === item.isPage" :class="{'vip' : 1 === item.isPage}" />
      <!-- 普通页面 -->
      <v-image :duration="0" :is-fade="false" :is-lazy="false" width="48rpx" height="48rpx" :url="getUrl(item)" v-else />
      <view class="text" :class="{'active' : selected.id === item.id}">{{item.text}}</view>
    </view>
  </view>
</template>

<script>
import Image from '../../components/image/index'
import color from '@/config/color.js'
// import base64 from '@/util/base64'
// import Home from '../../api/home'
import config from '../../config/config'
// const homeModel = new Home()

export default {
  props: ['selected', 'list'],
  components: {
    'v-image': Image,
  },
  data() {
    return {
      baseUrl: config.baseUrl,
      color: '#333333',
      selectedColor: color.main_color,
      // list: []
    }
  },
  methods: {
    // 判断图片路径
    getUrl(item) {
      if (this.selected.id === item.id) {
        return item.activeIcon.path
      }
      return item.icon.path
    },
    // 切换
    switchTab(item) {
      this.$emit('changeTabbar', item)
    },
    // 获取数据
    // getTabbar() {
    //   homeModel.getTabbar().then(response => {
    //     let { data } = response
    //     data = base64.parse(data)
    //     this.list = data.list
    //   })
    // }
  },
  created() {
    // this.getTabbar()
  }
}
</script>

<style scoped lang="scss">
.tab-list {
  position: fixed;
  z-index: 9999;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100rpx;
  background: white;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-bottom: env(safe-area-inset-bottom); // 适配iphoneX的底部
  border-top: 1rpx solid #f3f5f7;
  .item {
    flex: 1;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    .vip {
      margin-top: -24rpx;
    }
    .text {
      font-size: 24rpx;
      margin-top: 6rpx;
      //background: black;
      &.active {
        color: $main_color;
        font-weight: 700;
      }
    }
  }
}
</style>
